<template>
  <div>
    <div class="top">
    <div class="top_main">
    <div @click="back"><van-icon name="arrow-left"/></div>
    <div>保险</div>
    <div>···</div>
    </div>
  </div>
  <div class="search">
    <van-icon name="search" />
    <div>请输入保险产品名称</div>
  </div>
  <div class="renqi">
    <div class="head">
        <h2>人气产品</h2>
    </div>
    <div class="main">
        <div class="left">
            <div class="top1">
                <img src="@/assets/money/top1.png" alt="">
            </div>
        </div>
        <div class="right">
            <div class="top2">
                <img src="@/assets/money/top2.png" alt="">
            </div>
            <div class="top3">
                <img src="@/assets/money/top3.png" alt="">
            </div>
        </div>
    </div>
    
  </div>
  <div class="tuijian">
    <div class="head">
        <h2>推荐产品</h2>
    </div>
    <div class="main">
        <div class="chanpin_img">
            <img src="@/assets/money/top2.png" alt="">
        </div>
        <div class="chanpin_text">
            <div class="title">
                “账户保”个人账户资金安全保险
            </div>
            <p>建信财险丨年销163715笔丨1份起</p>
        </div>
    </div>
    <div class="main">
        <div class="chanpin_img">
            <img src="@/assets/money/top2.png" alt="">
        </div>
        <div class="chanpin_text">
            <div class="title">
                “账户保”个人账户资金安全保险
            </div>
            <p>建信财险丨年销163715笔丨1份起</p>
        </div>
    </div>
    <div class="main">
        <div class="chanpin_img">
            <img src="@/assets/money/top2.png" alt="">
        </div>
        <div class="chanpin_text">
            <div class="title">
                “账户保”个人账户资金安全保险
            </div>
            <p>建信财险丨年销163715笔丨1份起</p>
        </div>
    </div>
    <div class="main">
        <div class="chanpin_img">
            <img src="@/assets/money/top2.png" alt="">
        </div>
        <div class="chanpin_text">
            <div class="title">
                “账户保”个人账户资金安全保险
            </div>
            <p>建信财险丨年销163715笔丨1份起</p>
        </div>
    </div>
  </div>
  </div>

</template>

<script>
export default {
    methods:{
        back(){
            this.$router.push('money')
        }
    }
}
</script>

<style lang="scss">
    .top{
        background-color: #136ab7;
        .top_main{
        height: 0.5rem;
        width: 90%;
        margin: 0 auto;
        color: white;
        display: flex;
        justify-content: space-between;
        div{
            font-size: .2rem;
            line-height: .5rem;
        }
    }
    }
    .search{
        height: .3rem;
        width: 90%;
        border-radius: .5rem;
        margin: .1rem auto;
        border: .01rem solid black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .renqi{
        .head{
            border-bottom: .01rem solid black;
            h2{
            font-size: .2rem;
            color: skyblue;
            margin-left: .2rem;
        }
        }
        .main{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: .1rem;
            .left{
                width: 48%;
                height: 2rem;
                border: .01rem solid black;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .right{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 2rem;
                width: 50%;
                div{
                    width: 100%;
                    height: 48%;
                    border: .01rem solid black;
                    border-radius: .1rem;
                    overflow: hidden;
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
        }
        
    }
    .tuijian{
        .head{
            border-bottom: .01rem solid black;
            h2{
            font-size: .2rem;
            color: skyblue;
            margin-left: .2rem;
        }
        }
        .main{
            height: 1rem;
            width: 90%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin:  0 auto;
            border-bottom: .01rem solid black;
            .chanpin_img{
                height: .6rem;
                width: 30%;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .chanpin_text{
                height: .6rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                p{
                    font-size: .08rem;
                }
            }
        }
    }
</style>